<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../components/element/element.css">
    <style>
        body {
            margin: 0 !important;
            padding: 0 !important
        }

        .header {
            max-height: 60px
        }

        .header .user .el-submenu.is-active .el-submenu__title {
            border-bottom: 0 !important
        }

        .clearfix:after {
            content: " ";
            display: block;
            height: 0;
            clear: both;
        }

        /*IE/7/6*/
        .clearfix {
            *zoom: 1;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #plan li {
            float: left;
            width: 50px;
            height: 50px;
            margin: 3px;
            border: 1px solid #999;
            color: #fff;
            font-size: 12px;
            line-height: 50px;
            text-align: center;
            position: relative;
            border-radius: 4px;
        }

        #plan .aisle {

        }

        #plan .aisle:before {
            content: ' ';
            position: absolute;
            width: 50px;
            left: 0;
            top: 0;
            height: 50px;
            background-color: #999;

        }

        #plan .undefined {
            background-color: #ccc;
        }

        #plan .storageArea {
            background-color: #7ED321;
        }

        #plan .sortingArea {
            background-color: #47D0B2;
        }

        #plan .temporaryStorageArea {
            background-color: #F6A623;
        }

        #plan .unqualifiedArea {
            background-color: #FF5066;
        }

        #plan .selectedState {
            border:2px solid #BD0FE1;
            margin: 2px;
        }

        #tag {
            width: 100%;
            overflow: scroll;
        }


    </style>
</head>
<body>

<div id="plan">
    <el-input type="textarea" v-model="desc"></el-input>
    <div id="tag" style="max-height:300px;">
        <ul v-for="a of list" :style="{width:listWidth}" class="clearfix">
            <plan-block
                    v-for="a1 of a"
                    :clc="eClick"
                    :dclc="eDoubleClick"
                    :element="a1">
            </plan-block>
        </ul>
    </div>

    <el-dialog
            title="收货地址"
            @open="dialogOpen"
            v-model="dialogTableVisible">
        <el-table :data="dialogData">
            <el-table-column property="row" label="row" width="150"></el-table-column>
            <el-table-column property="col" label="col" width="200"></el-table-column>
            <el-table-column property="status" label="status"></el-table-column>
        </el-table>
        <div id="dialogECharts" style="width: 600px;height:400px;"></div>
    </el-dialog>
    <el-checkbox-group v-model="checkList" @change="checkListChange">
        <el-checkbox :label="big.id" v-for="big of bigKuQu"></el-checkbox>
    </el-checkbox-group>
    <!--TODO 按钮等待效果-->
    <el-button @click="set(2)">设为存储区</el-button>
    <el-button @click="set(4)">设为暂存区</el-button>
    <el-button @click="set(1)">设为未设定区</el-button>
    <el-button @click="addArea">添加库区</el-button>
    <el-button @click="">查看所有库区</el-button>    <!--TODO 查看所有库区是什么鬼？-->
    <el-button @click="set(3)">设为分拣区</el-button>
    <el-button @click="set(5)">设为不合格区</el-button>
    <el-button @click="deleteArea">删除库区</el-button>
    <el-button @click="resetSelect">重置选择</el-button>
</div>

</body>
</html>

<script src="../../components/debug/jquery.js"></script>
<script src="../../components/debug/vue.js"></script>
<script src="../../components/debug/element.js"></script>
<script src="../../components/debug/echarts.js"></script>

<script>
    //id:{{a1.id}} row:{{a1.row}} col:{{a1.col}} status:{{a1.status}}
    //TODO 制作平面图解析功能

    /*<prod>*/
    console.log('线上版本');
    /*</prod>*/

    Vue.component('plan-block', {
        render: function (h) {
            // create kebabCase id
            var e = this.element;
            var click = this.clc;
            var dClick = this.dclc;

            return h('li', {
                "class": {
                    selectedState:e.select,
                    aisle:e.statusColor[0],
                    undefined:e.statusColor[1],
                    storageArea:e.statusColor[2],
                    sortingArea:e.statusColor[3],
                    temporaryStorageArea:e.statusColor[4],
                    unqualifiedArea:e.statusColor[5]
                },
                attrs: {
                    row: e.row,
                    col: e.col,
                    status: e.status
                },
                on: {
                    click: function () {
                        if(e.id==-1)return;
                        click(e.click());
                    },
                    dblclick: function () {
                        if(e.id==-1)return;
                        dClick(e.click());
                    }
                }
            }, e.id)
        },
        props: {
            element: {
                type: Object,
                required: true
            },
            clc: '',
            dclc: ''
        }
    });
    var isdb=false;                              //维护单击与双击事件

    var plan = new Vue({
        el: '#plan',
        prop: {},
        data: function () {
            return {
                desc: 'aaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\naaaa bbbbb cccc\ndddd bbbbb eeee\ndddd bbbbb eeee\n',
                // TODO 平面图 总数据信息 (未解析)
                kuQu: [[]],                      // 库区
                bigKuQu: {},                     // 库区组
                eClick: function (e) {
                    isdb=false;
                    window.setTimeout(function(){
                        if(isdb!=false)return;
                        plan.selectedKuQu(e);
                    }, 300);
                },      // 单击库区 选中
                eDoubleClick: function (e) {
                    //TODO 模拟弹出层 完整版
                    isdb=true;
//                    console.log(e);
                    plan.$data.dialogData = [e];
//                    console.log(plan.$data.dialogData);
                    plan.$data.dialogTableVisible = true;
                },// 双击库区 查看详细信息
                dialogData: {
                    row: 0,
                    col: 0,
                    status: 0
                },               // 弹出层 基础数据
                dialogTableVisible: false,       // 弹出层 维护
                dialogECharts: {
                    title: {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },            // 弹出层 图表
                checkList: [],                   // 快捷多选 维护
                selected: [],                    // 被选中的库区

            };
        },
        computed: {
            list: function () {
                var obj = [[]];
                var kuQu = {};
                var row = 0;
                var col = 1;
                var step = {};

                for (var i = 0; i < this.desc.length; i++) {
                    switch (this.desc[i]) {
                        case ' ':       //过道
                            obj[row].push({id: -1, status: 0,statusColor:[true,false,false,false,false,false]});
                            break;
                        case '\n':      //换行
                            row++;
                            col = 1;
                            obj.push([]);
                            break;
                        default:        //仓库
                            if (typeof kuQu[this.desc[i]] == 'undefined') {
                                kuQu[this.desc[i]] = {color: '', src: [], id: this.desc[i].toUpperCase()};
                            }
                            step = {
                                row: row,
                                col: col++,
                                statusColor:[false,true,false,false,false,false],
                                status: 1,
                                id: kuQu[this.desc[i]].id + kuQu[this.desc[i]].src.length,
                                click: function () {
                                    return this;
                                },
                                select:false
                            };
                            kuQu[this.desc[i]].src.push(step);                  //库区
                            obj[row].push(step);
                    }
                }
                this.bigKuQu = kuQu;
                this.kuQu = obj;

                return obj;
            },           // list所有的储存区域
            listWidth: function () {
                var maxNumber = this.kuQu[0].length;
                for (var i = 1; i < this.kuQu.length; i++) {
                    if (this.kuQu[i].length > maxNumber)
                        maxNumber = this.kuQu[i].length;
                }
                return maxNumber * 58 + 'px';
            }       // 维护最大平面图宽度
        },
        methods: {
            isAisle: function (id) {
                if (id == -1) {

                } else {

                }
            },
            dialogOpen: function () {
                Vue.nextTick(function () {
                    var myChart = echarts.init(document.getElementById('dialogECharts'));
                    myChart.setOption(plan.$data.dialogECharts);
                });
            },
            checkListChange: function () {
                resetSelectC(this.kuQu);
                this.selected=[];
                for(var b=0;b<this.checkList.length;b++){
                    var step=this.checkList[b].toLowerCase();
                    for(var i=0;i<this.bigKuQu[step].src.length;i++){
                        this.bigKuQu[step].src[i].select=true;
                        this.selected.push(this.bigKuQu[step].src[i]);
                    }
                }
            },
            selectedKuQu: function (e) {
                e.select = !e.select;
                if(e.select){
                    this.selected.push(e);
                }else{
                    remove(this.selected,e);
                }
            },
            resetSelect:function () {
                resetSelectC(this.kuQu);
                this.checkList=[];
                this.selected=[];
            },
            set:function (number) {
                //TODO 此处应有检查
                for(var i=0;i<this.selected.length;i++){
                    this.selected[i].statusColor[this.selected[i].status]=false;
                    this.selected[i].statusColor[number]=true;
                    this.selected[i].status=number;
                }
                //TODO 此处有应有post请求
                this.resetSelect();
            },
            addArea:function () {

            },
            deleteArea:function () {

            }
        },
        watch: {}
    });

    //TODO 工具函数调整
    function resetSelectC(kuQu) {
        for(var b=0;b<kuQu.length;b++){
            for(var i=0;i<kuQu[b].length;i++){
                kuQu[b][i].select=false;
            }
        }
    }
    function remove(obj, data) {
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            var temp = data[i];
            if (!isNaN(obj)) {
                temp = i;
            }
            if (temp == obj) {
                for (var j = i; j < data.length; j++) {
                    data[j] = data[j + 1];
                }
                data.pop();
            }
        }
    }


</script>